<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时间爆破 </title>
	</head>
	<style type="text/css">
		body {
			text-align: center;
		}
	</style>

	<body>
		<audio src="img/DBITSG.mp3" autoplay="autoplay"></audio>
		<canvas id="Mycanvas" width="1300" height="550"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			var Numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0]
				] //0
			];

			var img = new Image();
			img.src = "img/a.jpg";

			var balls = [];
			img.onload = function() {
				var date = new Date();
				setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.drawImage(img, 0, 0, 1300, 550);
					var text = [1, 9, 10, 4, 2, 10, 5, 0];
					var time = new Date();
					if(time.getSeconds() != date.getSeconds()) {
						//判断秒数是个位变还是十位变

						var gw = date.getSeconds() % 10;
						if(time.getSeconds() % 10 != date.getSeconds() % 10) {
							addBall(930, 10, gw);
							var sw1 = parseInt(date.getSeconds() / 10);
							var sw2 = parseInt(time.getSeconds() / 10);
							if(sw1 != sw2) {
								addBall(770, 10, sw1);
							}
							//添加小球
							//秒数变了

						}
						if(time.getMinutes() != date.getMinutes()) {
							//判断分钟数是个位变还是十位变
							var gw1 = date.getMinutes() % 10;
							addBall(550, 10, gw1);
							var sw11 = parseInt(date.getMinutes() / 10);
							var sw12 = parseInt(time.getMinutes() / 10);
							if(sw11 != sw12) {
								addBall(390, 10, sw11);
							}
							//添加小球
							//秒数变了

						}
						if(time.getHours() != date.getHours()) {
							//判断小时数是个位变还是十位变
							var gw11 = date.getHours() % 10;
							addBall(170, 10, gw11);
							var sw111 = parseInt(date.getHours() / 10);
							var sw112 = parseInt(time.getHours() / 10);
							if(sw111 != sw112) {
								addBall(0, 10, sw111);
							}
						}
						//添加小球
						//秒数变了
						date = time;

					}

					//打印改变以后的时间
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;
					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;
					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;
					for(var i = 0; i < text.length; i++) {
						if(i == 0 || i == 1) {
							drawNumber(i * 160 + 10, 10, text[i]);
						}
						if(i == 2) {
							drawNumber(i * 160 - 30, 10, text[i]);
						} else if(i == 3 || i == 4) {
							drawNumber(i * 160 - 90, 10, text[i]);
						} else if(i == 5) {
							drawNumber(i * 160 - 130, 10, text[i]);
						} else if(i == 6 || i == 7) {
							drawNumber(i * 160 - 190, 10, text[i]);
						}
						//打印小球
					}
					drawBalls();

				}, 33);

				function addBall(ball1X, ball1Y, number) {
					for(var i = 0; i < Numbers[number].length; i++) {
						var t1 = i * 20;
						for(var k = 0; k < Numbers[number][i].length; k++) {
							var vx = Math.random() * 5 + 5;
							if(Math.random() > 0.5) {
								vx = -vx;
							}
							var vy = Math.random() * 10 + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							var l1 = k * 20;
							var r = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var color = "rgba(" + r + "," + g + "," + b + ")";
							//x,y,r,vx,xy,color
							if(Numbers[number][i][k] == 1) {
								//添加小球
								balls.push([ball1X + l1, ball1Y + t1, 10, vx, vy, color]);

							}
						}
					}
				}

				function drawBalls() {
					for(var i = 0; i < balls.length; i++) {

						ctx.beginPath();
						ctx.fillStyle = balls[i][5];
						ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
						ctx.fill();
						balls[i][0] = balls[i][0] + balls[i][3];

						if(balls[i][1] > canvas.height) {

							balls[i][4] = -balls[i][4];
							balls[i][4] = balls[i][4] * 0.7;
							balls[i][1] = canvas.height - balls[i][2];
						}
						balls[i][1] = balls[i][1] + balls[i][4];
						balls[i][4] = balls[i][4] + 3;
					}

				}

				function drawNumber(arcx, arcy, Num) {
					var Number1 = Numbers[Num];
					var R = 10;
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					for(var i = 0; i < Number1.length; i++) {
						var y = 2 * R * i + arcy;

						for(var j = 0; j < Number1[i].length; j++) {

							if(Number1[i][j] == 1) {
								ctx.beginPath();
								var x = j * 2 * R + arcx;
								ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
								ctx.arc(x, y, R, 0, 2 * Math.PI);
								ctx.fill();
							}
						}
					}

				}
			}
		</script>
	</body>

</html>